import React from 'react'

interface ControlButtonsProps {
  onTest: () => void
  onBatchTest: () => void
  onClear: () => void
  onPause: () => void
  onResume: () => void
  onTogglePerformance: () => void
  onToggleDetection: () => void
  onToggleSettings: () => void
  onOpenAdvancedSettings: () => void
  onOpenVideoDrawer: () => void
  onReloadDetection: () => void
  performanceMode: boolean
  detectionMode: boolean
  showSettings: boolean
  detectionInitializing: boolean
  detectionError?: Error
}

/**
 * 控制按钮组件
 */
export const ControlButtons: React.FC<ControlButtonsProps> = ({
  onTest,
  onBatchTest,
  onClear,
  onPause,
  onResume,
  onTogglePerformance,
  onToggleDetection,
  onToggleSettings,
  onOpenAdvancedSettings,
  onOpenVideoDrawer,
  onReloadDetection,
  performanceMode,
  detectionMode,
  showSettings,
  detectionInitializing,
  detectionError
}) => {
  return (
    <div className="control-buttons">
      <button onClick={onTest}>测试弹幕</button>
      <button onClick={onBatchTest}>批量测试</button>
      <button onClick={onClear}>清空弹幕</button>
      <button onClick={onPause}>暂停</button>
      <button onClick={onResume}>恢复</button>
      <button onClick={onTogglePerformance} className={performanceMode ? 'active' : ''}>
        {performanceMode ? '🚀 性能模式' : '🎯 精确模式'}
      </button>
      <button onClick={onToggleDetection} className={detectionMode ? 'active' : ''}>
        {detectionMode ? '👁️ 检测开启' : '👁️ 检测关闭'}
      </button>
      <div style={{display: 'flex', flexWrap: 'wrap', gap: '5px', marginBottom: '10px'}}>
        <button 
          style={{backgroundColor: '#FF9800', color: 'white'}}
        >
          🎭 纯蒙版模式
        </button>
      </div>
      <button onClick={onToggleSettings}>
        {showSettings ? '隐藏设置' : '显示设置'}
      </button>
      <button onClick={onOpenAdvancedSettings} style={{backgroundColor: '#00a1d6', marginLeft: '10px'}}>
        ⚙️ 高级设置
      </button>
      <button onClick={onOpenVideoDrawer} style={{backgroundColor: '#28a745', marginLeft: '10px'}}>
        📁 Videos
      </button>
      <button 
        onClick={onReloadDetection} 
        disabled={detectionInitializing || !detectionMode}
        className="reload-detection-btn"
        style={{marginLeft: '10px'}}
        title={detectionError ? 'MediaPipe 受 CORS 限制，使用模拟检测' : '重新加载 MediaPipe 检测'}
      >
        🔄 重载检测
      </button>
    </div>
  )
}

